<template>
  <div>
    <!-- end  -->
    <div class="bor_banner01">

    </div>
    <!-- end banner -->
    <div class="bor_con_wper">
      <div class="bor_con px1000">
        <div class="bor_detail">
          <h2 class="bor_detail_tit">
            <span  :class="{bor_decurspan:(model==1)}" @click="changeModel(1)">房产抵押</span>
            <span :class="{bor_decurspan:(model==2)}"  @click="changeModel(2)">车辆抵押</span>
            <span :class="{bor_decurspan:(model==3)}" @click="changeModel(3)">信用贷款</span>
            <span :class="{bor_decurspan:(model==4)}" @click="changeModel(4)">零首付车贷</span>
          </h2>
          <div class="bor_detail_box">
            <div class="bor_det_one clearfix pt30 pb30">
              <div class="bor_det_onel fl">
                <p class="bor_p1">中兴财富平台的借款功能旨在帮助借款用户以
                  低成本获得借款。用户在需要资金时，可以将
                  自有房产和车产作为抵押物，小油菜线下审核
                  通过后，根据抵押物的价值融资。</p>
                <p class="bor_p2">中兴财富平台的借款功能旨在帮助借款用户以
                  低成本获得借款。用户在需要资金时，可以将
                  自有房产和车产作为抵押物，小油菜线下审核
                  通过后，根据抵押物的价值融资。</p>
                <h3 class="bor_onel_tit"><span>申请条件</span></h3>
                <ul class="bor_onel_ul">
                  <li><img src="../assets/images/bor_pic01.png" alt="">年满18周岁以上的公民
                  </li>
                  <li><img src="../assets/images/bor_pic02.png" alt="">需要北京房产或车产抵押
                  </li>
                  <li><img src="../assets/images/bor_pic03.png" alt="">个人或企业银行征信记录良好
                  </li>
                  <li><img src="../assets/images/bor_pic04.png" alt="">
                    无现有诉讼记录
                  </li>

                </ul>
                <h3 class="bor_onel_tit"><span>提交资料</span></h3>
                <ul class="bor_onel_ul">
                  <li>&nbsp;<img src="../assets/images/bor_pic05.png" alt="">身份证
                  </li>
                  <li><img src="../assets/images/bor_pic06.png" alt="">申请资料
                  </li>
                  <li><img src="../assets/images/bor_pic07.png" alt="">其他
                  </li>
                </ul>
              </div>
              <!-- end l -->
              <div class="bor_det_oner fl"  v-show="model==1" >
                <form>
                  <fieldset>
                    <div>
                      <label>申请人</label>
                      <input type="" v-model="uname" @blur="checkuanme">
                      <p style="color: red;font-size: 16px">{{unamemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款金额</label>
                      <input type="" class="bor_inputbg01" v-model="money" @blur="checkmoney">
                      <p style="color: red;font-size: 16px">{{moneymsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款期限</label>
                      <input type="" class="bor_inputbg02" v-model="month" @blur="checkdatetime">
                      <p style="color: red;font-size: 16px">{{monthemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*手机号码</label>
                      <input type="" v-model="phone"   @blur="checkmobile">
                      <p style="color: red;font-size: 16px">{{phonemsg}}</p>
                    </div>
                    <div class="mt15 guarmethod clearfix">
                      <label class="guarmethod_l fl">*担保方式</label>
                      <div class="fl">
                        <span>房屋数量</span>
                        <input type="number" min="0" class="bor_inputbg03 input2" v-model="status" @blur="checknuamber"><br><br>
                        <span>总价值</span>
                        <input type="text" class="bor_inputbg04 input2" v-model="amount"><br>
                      </div>
                    </div>
                    <div class="mt15">
                      <label>*借款用途</label>
                      <select v-model="typeid">

                        <option v-for="method in usemethod" :value="method.usemethodId">{{method.usemethodName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*还款方式</label>
                      <select  v-model="payId">

                        <option v-for="t in investRepays" :value="t.repayId">{{t.repayName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*借款描述</label>
                      <textarea v-model="describe"></textarea>

                    </div>
                    <div class="mt15">
                      <label>*借款情况</label>
                      <input type="radio" class="input3" name="type" value="普通借款"  v-model="state">
                      普通借款
                      <input type="radio" class="input3" name="type" value="紧急借款" v-model="state">
                      紧急借款
                    </div>
                    <div class="mt30">
                      <label></label>
                      <a href="#" class="bor_btn" @click="addLoans">提交材料</a>
                    </div>
                  </fieldset>
                </form>
              </div>
              <div class="bor_det_oner fl"  v-show="model==2" >
                <form>
                  <fieldset>
                    <div>
                      <label>申请人</label>
                      <input type="" v-model="uname" @blur="checkuanme">
                      <p style="color: red;font-size: 16px">{{unamemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款金额</label>
                      <input type="" class="bor_inputbg01" v-model="money" @blur="checkmoney">
                      <p style="color: red;font-size: 16px">{{moneymsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款期限</label>
                      <input type="" class="bor_inputbg02" v-model="month" @blur="checkdatetime">
                      <p style="color: red;font-size: 16px">{{monthemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*手机号码</label>
                      <input type="" v-model="phone"   @blur="checkmobile">
                      <p style="color: red;font-size: 16px">{{phonemsg}}</p>
                    </div>
                    <div class="mt15 guarmethod clearfix">
                      <label class="guarmethod_l fl">*担保方式</label>
                      <div class="fl">
                        <span>车辆数量</span>
                        <input type="number" min="0" class="input2" v-model="status" @blur="checknuamber"><br><br>
                        <span>总价值</span>
                        <input type="text" class="bor_inputbg04 input2" v-model="amount"><br>
                      </div>
                    </div>
                    <div class="mt15">
                      <label>*借款用途</label>
                      <select v-model="typeid">

                        <option v-for="method in usemethod" :value="method.usemethodId">{{method.usemethodName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*还款方式</label>
                      <select  v-model="payId">

                        <option v-for="t in investRepays" :value="t.repayId">{{t.repayName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*借款描述</label>
                      <textarea v-model="describe"></textarea>

                    </div>
                    <div class="mt15">
                      <label>*借款情况</label>
                      <input type="radio" class="input3" name="type" value="普通借款"  v-model="state">
                      普通借款
                      <input type="radio" class="input3" name="type" value="紧急借款" v-model="state">
                      紧急借款
                    </div>
                    <div class="mt30">
                      <label></label>
                      <a href="#" class="bor_btn" @click="addLoans">提交材料</a>
                    </div>
                  </fieldset>
                </form>
              </div>

              <div class="bor_det_oner fl"  v-show="model==3">
                <form>
                  <fieldset>
                    <div>
                      <label>申请人</label>
                      <input type="" v-model="uname" @blur="checkuanme">
                      <p style="color: red;font-size: 16px">{{unamemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款金额</label>
                      <input type="" class="bor_inputbg01" v-model="money" @blur="checkmoney">
                      <p style="color: red;font-size: 16px">{{moneymsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款期限</label>
                      <input type="" class="bor_inputbg02" v-model="month" @blur="checkdatetime">
                      <p style="color: red;font-size: 16px">{{monthemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*手机号码</label>
                      <input type="" v-model="phone"   @blur="checkmobile">
                      <p style="color: red;font-size: 16px">{{phonemsg}}</p>
                    </div>
                    <div class="mt15 guarmethod clearfix">
                      <label class="guarmethod_l fl">*担保方式</label>
                      <div class="fl">
                        <span>信用数量</span>
                        <input type="number" min="0" class="input2" v-model="status" @blur="checknuamber"><br><br>
                        <span>总价值</span>
                        <input type="text" class="bor_inputbg04 input2" v-model="amount"><br>
                      </div>
                    </div>
                    <div class="mt15">
                      <label>*借款用途</label>
                      <select v-model="typeid">

                        <option v-for="method in usemethod" :value="method.usemethodId">{{method.usemethodName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*还款方式</label>
                      <select  v-model="payId">

                        <option v-for="t in investRepays" :value="t.repayId">{{t.repayName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*借款描述</label>
                      <textarea v-model="describe"></textarea>

                    </div>
                    <div class="mt15">
                      <label>*借款情况</label>
                      <input type="radio" class="input3" name="type" value="普通借款"  v-model="state">
                      普通借款
                      <input type="radio" class="input3" name="type" value="紧急借款" v-model="state">
                      紧急借款
                    </div>
                    <div class="mt30">
                      <label></label>
                      <a href="#" class="bor_btn" @click="addLoans">提交材料</a>
                    </div>
                  </fieldset>
                </form>
               </div>
            <!-- end 房产抵押 -->
              <div class="bor_det_oner fl"  v-show="model==4">
                <form>
                  <fieldset>
                    <div>
                      <label>申请人</label>
                      <input type="" v-model="uname" @blur="checkuanme">
                      <p style="color: red;font-size: 16px">{{unamemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款金额</label>
                      <input type="" class="bor_inputbg01" v-model="money" @blur="checkmoney">
                      <p style="color: red;font-size: 16px">{{moneymsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*借款期限</label>
                      <input type="" class="bor_inputbg02" v-model="month" @blur="checkdatetime">
                      <p style="color: red;font-size: 16px">{{monthemsg}}</p>
                    </div>
                    <div class="mt15">
                      <label>*手机号码</label>
                      <input type="" v-model="phone"   @blur="checkmobile">
                      <p style="color: red;font-size: 16px">{{phonemsg}}</p>
                    </div>

                    <div class="mt15">
                      <label>*借款用途</label>
                      <select v-model="typeid">

                        <option v-for="method in usemethod" :value="method.usemethodId">{{method.usemethodName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*还款方式</label>
                      <select  v-model="payId">

                        <option v-for="t in investRepays" :value="t.repayId">{{t.repayName}}</option>
                      </select>
                    </div>
                    <div class="mt15">
                      <label>*借款描述</label>
                      <textarea v-model="describe"></textarea>

                    </div>
                    <div class="mt15">
                      <label>*借款情况</label>
                      <input type="radio" class="input3" name="type" value="普通借款"  v-model="state">
                      普通借款
                      <input type="radio" class="input3" name="type" value="紧急借款" v-model="state">
                      紧急借款
                    </div>
                    <div class="mt30">
                      <label></label>

                      <a href="#" class="bor_btn" @click="addLoans">提交材料</a>
                    </div>
                  </fieldset>
                </form>
              </div>
            </div>
            <!-- end  -->
            <!-- end  -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "",
    data(){
      return{
        uname:"",money:"",month:"",phone:"",status:"",amount:"",typeid:1,payId:1,describe:"",state:"",
        unamemsg:"",moneymsg:"",phonemsg:"",monthemsg:"",
        unameflag:false,moneyflag:false,phoneflage:false,timefalg:false, model:1,
        usemethod:{},investRepays:{}
      }
    },
    methods:{
      changeModel(i){
         this.uname="",this.money="",this.phone="",this.month="",this.status="",this.amount="",
           this.describe="",this.state="",
           this.unamemsg="",this.moneymsg="",this.phonemsg="", this.moneymsg=""
           this.model=i
      },
      //增加贷款
      addLoans:function(){
        if(this.unameflag&&this.moneyflag&&this.phoneflage&&this.timefalg) {
          this.axios.post("/api/borrow/addLoans", {
            loansName: this.uname,
            loansMoney: this.money,
            loansPhone: this.phone,
            loansMonth: this.month,
            loansStatus: this.status,
            loansTotalvalue: this.amount,
            usemethodId: this.typeid,
            repayid: this.payId,
            loansDescribe: this.describe,
            loansState: this.state,
            ltypeId: this.model
          }).then((data => {
            if (data.data == 10) {
              alert("借贷成功")
              this.uname = "", this.money = "", this.phone = "", this.month = "",
                this.status = "", this.amount = "",
                this.describe = "", this.state = ""

            }
          }))

        }
      },
      //用户名的非空验证
      checkuanme:function(){
        if(this.uname==""){
          this.unamemsg="用户名不能为空！"
          this.unameflag=false
        }else{
          this.unamemsg=""
          this.unameflag=true
        }

      },
      //金额的正则验证
      checkmoney:function(){
        if(!/^[1-9][0-9]{0,}$/.test(this.money)){
          this.moneymsg="请输入正整数！"
          this.moneyflag=false
        }else {
          this.moneymsg=""
          this.moneyflag=true
        }

      },
      //手机号的正则验证
      checkmobile:function () {
        if(!/^1[34578][0-9]{9}$/.test(this.phone)){
          this.phonemsg="请输入正确的手机号！"
          this.phoneflage=false
        }else{
          this.phonemsg=""
          this.phoneflage=true
        }
      },
      //时间的正则表达式验证
      checkdatetime:function(){
        if(!/^[1-9][0-9]{0,}$/.test(this.month)){
          this.monthemsg="请输入正整数！！"
          this.timefalg=false
        }else{
          this.monthemsg=""
          this.timefalg=true
        }
      },

      checknuamber:function () {

      }
    },

    //初始化数据
    created() {
      this.axios.get("/api/borrow/findAllLoansUsemethod",{
      }).then((data=>{
        this.usemethod=data.data
      }))
      this.axios.get("/api/borrow/findAllInvestRepay",{
      }).then((data=>{
        this.investRepays=data.data
      }))
    }
  }
</script>

<style scoped>

</style>
